<template>
    <div>
        <div class="container">
            <el-row :gutter="10">
                <el-col :span="5">
                    <el-select v-model="query.typeId" filterable clearable placeholder="请选择类型">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="5"> <el-select v-model="query.status" filterable clearable placeholder="请选择状态">
                        <el-option :label="'待处理'" :value="0">待处理</el-option>
                        <el-option :label="'已处理'" :value="1">已处理</el-option>
                    </el-select></el-col>
                <el-col :span="5"> <el-input v-model="query.key" placeholder="举报人/被举报人/处理人" class="handle-input"
                        clearable></el-input>
                </el-col>
                <el-col :span="2"> <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-col>
            </el-row>

            <el-table :data="tableData" border stripe class="table" ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="userName" label="举报人" align="center"></el-table-column>
                <el-table-column prop="coachName" label="被举报人" align="center"></el-table-column>
                <el-table-column prop="statusName" label="状态" align="center"></el-table-column>
                <el-table-column prop="typeName" label="类型" align="center"></el-table-column>
                <el-table-column prop="description" label="说明" align="center"></el-table-column>
                <el-table-column prop="result" label="处理结果" align="center"></el-table-column>
                <el-table-column prop="adminName" label="处理人" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="success" @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.status">审核</el-button>
                        <el-button type="primary" @click="handleInfo(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pno"
                    :page-size="query.size" :total="query.total" @current-change="handlePageChange"></el-pagination>
            </div>

        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="审核/查看" v-model="editVisible" width="70%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="举报人">
                    <el-input v-model="form.userName" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="被举报人">
                    <el-input v-model="form.coachName" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="form.statusName" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="form.typeName" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="form.description" disabled clearable></el-input>
                </el-form-item>
                <el-form-item label="反馈图片">
                    <el-image :src="form.descriptionImage" :preview-src-list="[[form.descriptionImage]]"
                        style="width: 100px;"></el-image>
                </el-form-item>
                <el-form-item label="处理结果">
                    <el-input v-model="form.result" clearable :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="处理人">
                    <el-input v-model="form.adminName" disabled clearable></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button v-if="!form.status" type="primary" @click="saveEdit">审 核</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import { ElMessage } from "element-plus";

export default {
    name: "bookList",
    data() {
        return {
            query: {
                pno: 1,  //当前页码
                total: 0,   //总共条数
                size: 4,   //每页多少条
                key: '', //搜索关键字
                typeId: '',
                status: ''
            },
            tableData: [],
            pageshow: true,
            editVisible: false,
            form: {},
            idx: -1,
            typeList: [],
            isDisabled:''

        }
    },
    created() {
        this.getData();
        this.getAllType()
    },

    methods: {
        getData() {
            let that = this;
            this.$http.post("report/list", this.query)
                .then(res => {
                    console.log(res)
                    that.tableData = res.data.records
                    that.query.pno = Number(res.data.current)  //当前是第几页
                    that.query.total = Number(res.data.total) //总共条数
                    that.query.size = Number(res.data.size)//每页多少条
                })
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
            this.title = '审核'
            this.isDisabled=false
        },
        handleInfo(index, row){
            this.idx = index;
            this.form = row;
            this.editVisible = true;
            this.title = '查看'
            this.isDisabled=true
        },
        // 保存编辑
        saveEdit() {
            let that = this;
            that.editVisible = false;
            this.$http.post('report/auditing', this.form).then(
                res => {
                    that.$message.success(res.msg);
                    this.getData()
                }
            )
        },
        // 分页导航
        handlePageChange(val) {
            this.query.pno = val
            this.getData()
        },
        //搜索
        handleSearch() {
            this.getData()
        },
        getAllType() {
            let that = this
            this.$http.post('report/getAllType', {})
                .then(res => {
                    that.typeList = res.data
                })
        }
    },
}
</script>
  
<style scoped>
.el-select  {
    width: 100%;
}

.el-input {
    width: 100%;
}
.table{
    margin-top: 20px;
}
</style>
  